import React, { useMemo } from "react";
import axios from "axios";
import { useLocation, useNavigate } from "react-router-dom";
import './detail.css';
import { ArrowLeft } from '@react-vant/icons';

// 定义从URL参数中获取的数据类型
interface DetailParams {
  name: string;
  apply: string;
  imgs: string;
  content: string;
}

const Detail: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  // 缓存解析的参数，并使用接口定义类型
  const params = useMemo<DetailParams>(() => {
    const searchParams = new URLSearchParams(location.search);
    return {
      name: decodeURIComponent(searchParams.get('name') || '未知名称'),
      apply: decodeURIComponent(searchParams.get('apply') || '未知应用'),
      imgs: decodeURIComponent(searchParams.get('imgs') || ''),
      content: decodeURIComponent(searchParams.get('content') || '未知介绍'),
    };
  }, [location.search]);

  const handleBack = () => {
    window.history.go(-1);// 返回上一页
  };

  return (
    <div className="box">
      <ArrowLeft
        onClick={handleBack}
        className="back-button"
      />
      <div className="detail-container">
        <div className="detail-card">
          <div className="detail-image-wrapper">
            {params.imgs ? (
              <img
                src={params.imgs}
                alt={params.name}
                className="detail-image"
                loading="lazy"
                onError={(e) => {
                  e.target.src = 'https://via.placeholder.com/300x200?text=图片加载失败';
                  console.log(`图片加载失败: ${params.imgs}`);
                }}
              />
            ) : (
              <div className="detail-image-placeholder">暂无图片</div>
            )}
          </div>
          <div className="detail-info">
            <h2 className="detail-title">{params.name}</h2>
            <p className="detail-apply">
              <span className="label">应用场景：</span>
              {params.apply}
            </p>
            <p className="detail-content">
              <span className="label">介绍：</span>
              {params.content}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Detail;